<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="text" disabled id="txt" value="10">
  <input type="button" value="开始" id="start">
  <input type="button" value="暂停" id="stop">
  <input type="button" value="复位" id="reset">
</body>
<script>

  var txt = document.getElementById("txt");
  var start = document.getElementById("start");
  var stop = document.getElementById("stop");
  var reset = document.getElementById("reset");

  // 1. 获取倒计时的初始值
  var num = txt.value-0;
  // 18. 提前再次保存初始值，用作复位功能
  var resetNum = txt.value-0;

  // 13. 记录倒计时中是否需要复位功能的状态
  var isReset = false;

  var t;

  // 2. 开始功能
  start.onclick = function(){
    if( t ) return;
    // 3. 开启计时器
    t = setInterval(function(){
      // 4. 判断倒计时是否为0
      if(num <= 0){
        // 5. 为0，清除计时器
        clearInterval(t);
        // 14. 可以复位
        isReset = true;
        // 6. 清除计时器的标志
        t = undefined;
      }else{
        // 15. 不可以复位
        isReset = false;
        // 7. 倒计
        num--;
        // 8. 设置到容器
        txt.value = num;
      }

    }, 1000);
  }

  // 9. 暂停功能
  stop.onclick = function(){
    // 10. 清除计时器
    clearInterval(t);
    // 11. 清除计时器的标志
    t = undefined;
    // 16. 可以复位
    isReset = true;
  }

  // 12. 复位功能
  reset.onclick = function(){
    // 17. 判断是否可以复位
    if( !isReset ) return;
    // 19. 将输入框数字复位成初始值
    txt.value = resetNum;
    // 20. 将倒计时计算的数字复位成初始值
    num = resetNum;
    // 21. 不可以重复复位
    isReset = false;
  }

</script>
</html>